<template>
  <div :style="{ filter: 'grayscale(' + grayscaleValue + ')' }">
    <NavBar />
    <router-view class="main-content" />
    <Footer />
  </div>
</template>
<script lang="ts">
import { reactive, toRefs } from "vue";
import Footer from "./components/Footer.vue";
import NavBar from "./components/NavBar.vue";

export default {
  setup() {
    const isApril4th = (): number => {
      const now = new Date();
      const m = now.getMonth();
      const d = now.getDate();
      return m == 3 && d == 4 ? 1 : 0;
    };

    const data = reactive({
      grayscaleValue: isApril4th(),
    });                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                

    return {
      ...toRefs(data),
    };
  },
  components: {
    Footer,
    NavBar,
  },
};
</script>

<style lang="less">
.nav-bar {
  margin: auto;
  width: 1200px;
  padding: 30px;
  position: relative;
  a {
    font-size: 26px;
    font-weight: 800;
  }
}

.main-content {
  position: static;
  margin: 0px auto 50px auto;
  width: 1200px;
}
</style>
